<!DOCTYPE html>
<html lang="sv">
    <head>
        <meta charset="utf-8">
        <title>Galleria Classic Theme Demo 01</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="{{=URL(r=request,c='static',f='plugin_galleria/galleria.js')}}"></script>
<script src="{{=URL(r=request,c='static',f='plugin_galleria/plugins/galleria.flickr.js')}}"></script>
        <style>
            html,body{background:#111}
            .content{color:#ccc;font:14px/1.4 arial,sans-serif;width:600px;margin:20px auto}
            h1{line-height:1.1;letter-spacing:-1px;}
            #galleria{height:400px;}
        </style>
    </head>
<body>
    <div class="content">
        <h1>A classic Galleria gallery using Flickr images</h1>
        <div id="galleria"></div>
        <p id="nav">
            <a id="g_prev" href="#">Previous</a> 
            <a id="g_next" href="#">Next</a> 
            <a id="g_play" href="#">Play</a> 
            <a id="g_pause" href="#">Pause</a> 
            <a id="g_fullscreen" href="#">Fullscreen</a>
        </p> 
        <p>This example is a classic gallery that fetches images from a Flickr user stream using the Flickr plugin.
            We also added external links to navigate, pause, play and enter fullscreen mode.</p>
        <p>View source for comments and code.</p>
    </div>
    
    <script>
    
    // Load theme
    Galleria.loadTheme('{{=URL(r=request,c='static',f='plugin_galleria/themes/classic/galleria.classic.js')}}');

    // intiialize flickr plugin
    var api_key = 'fddd7bc223fe37295faace93a4f2d8fc'; // get your API key at Flickr
    var flickr = new Galleria.Flickr(api_key);
    
    // inject a user's photostrem photset into galleria
    flickr.getUser('lukewoodford', { 
        size: 'big',
        description: true // set this to true to fetch flickr descriptions
    }, function(data) {
        $('#galleria').galleria({
            data_source: data, // add the flickr data
            show_imagenav: false, // remove the prev/next arrows
            extend: function() {
                var gallery = this; // save the scope
                $('#nav a').click(function(e) {
                    e.preventDefault(); // prevent default actions on the links
                })
                // attach gallery methods to links:
                $('#g_prev').click(function() {
                    gallery.prev();
                });
                $('#g_next').click(function() {
                    gallery.next();
                });
                $('#g_play').click(function() {
                    gallery.play();
                });
                $('#g_pause').click(function() {
                    gallery.pause();
                });
                $('#g_fullscreen').click(function() {
                    gallery.enterFullscreen();
                });
            }
        });
    });
    
    </script>
    </body>
</html>
